import React, { Ref, useEffect, useImperativeHandle, useState } from 'react';
import { FC } from 'react';
import { Button, Modal, TreeSelect } from 'antd';
import './index.less';
import { observer } from 'mobx-react-lite';
import { Storage } from '@/utils/storage';
import { useStores } from '@/stores';
import { FlawFilterDialogT } from '@/typings/global';
const { SHOW_PARENT } = TreeSelect;

export interface FlawFilterDialogConf {
  onRef: Ref<any> | undefined;
  type?: FlawFilterDialogT;
  onSubmit?: () => void;
  openPmpFlaw?: () => void;
}

// TODO: 这个的缺陷筛选准备做 树选择---但是不能适用于后面的--加上数量---颜色
const FlawFilterDialog: FC<FlawFilterDialogConf> = (FlawFilterProps: FlawFilterDialogConf) => {
  const { commonStore, sysMapStore, lotStore } = useStores();
  const [FlawFilterDialogDialog, setFlawFilterDialogDialog] = useState(false);

  const [polFlaw, setPolFlaw] = useState<Array<number | string>>([]);
  const [piantiehouFlaw, setPiantiehouFlaw] = useState<Array<number | string>>([]);


  // 模型树
  const polTreeProps = {
    treeData: [
      {
        title: '全选',
        value: 'all',
        key: 'all',
        children: commonStore.polResult?.modeTreeData
      }
    ], // 不良的全集
    value: polFlaw, // 缺陷选中
    onChange: typeList => {
      setPolFlaw(typeList);
    },
    treeCheckable: true,
    showCheckedStrategy: SHOW_PARENT,
    placeholder: '请选择POL的缺陷',
    style: {
      width: '220px'
    },
    maxTagCount: 1
    // treeDefaultExpandedKeys: ['all']
  };
  // 模型树
  const pianTreeProps = {
    treeData: [
      {
        title: '全选',
        value: 'all',
        key: 'all',
        children: commonStore.pianResult?.modeTreeData
      }
    ], // 不良的全集
    value: piantiehouFlaw, // 缺陷选中
    onChange: typeList => {
      setPiantiehouFlaw(typeList);
    },
    treeCheckable: true,
    showCheckedStrategy: SHOW_PARENT,
    placeholder: '请选择偏贴后的缺陷',
    style: {
      width: '220px'
    },
    maxTagCount: 1
    // treeDefaultExpandedKeys: ['all']
  };

  useEffect(() => {
    initDefaultVal();
  }, []);

  const initDefaultVal = () => {
    if (FlawFilterProps.type == FlawFilterDialogT.layerId) {
      const isStorage = Storage.get('flawTypeLayerId');
      if (isStorage) {
        setPolFlaw(isStorage.pol);
        setPiantiehouFlaw(isStorage.piantiehou);
      }
      return;
    }
    if (FlawFilterProps.type == FlawFilterDialogT.lotDetail) {
      const isStorage = Storage.get('flawTypeLot');
      if (isStorage) {
        setPolFlaw(isStorage.pol);
        setPiantiehouFlaw(isStorage.piantiehou);
      }
      return;
    }
    // 初始化缺陷选中状态，[]:默认为空 和 ['all']：默认为全选
    const initFlawState = [];
    setPolFlaw(initFlawState);
    setPiantiehouFlaw(initFlawState);
  };

  // 点击-确定
  const handleSelect = async () => {
    // 判断条件是否为空
    // if (!doffFlaw.length) {
    //   return MessageWaring('前制程，选取缺陷不能为空！');
    // }
    // if (!polFlaw.length) {
    //   return MessageWaring('POL，选取缺陷不能为空！');
    // }
    // if (!piantiehouFlaw.length) {
    //   return MessageWaring('片贴后，选取缺陷不能为空！');
    // }
    if (FlawFilterProps.type == FlawFilterDialogT.layerId) {
      Storage.set('flawTypeLayerId', { pol: polFlaw, piantiehou: piantiehouFlaw });
      sysMapStore.flawTypeStorage.pol = polFlaw;
      sysMapStore.flawTypeStorage.piantiehou = piantiehouFlaw;
    }
    if (FlawFilterProps.type == FlawFilterDialogT.lotDetail) {
      Storage.set('flawTypeLot', { pol: polFlaw, piantiehou: piantiehouFlaw });
      lotStore.flawTypeStorage.pol = polFlaw;
      lotStore.flawTypeStorage.piantiehou = piantiehouFlaw;
    }
    setFlawFilterDialogDialog(false); // 关闭对话框
    if (FlawFilterProps.onSubmit) {
      FlawFilterProps.onSubmit();
    }
  };

  // 给外部调用
  useImperativeHandle(FlawFilterProps.onRef, () => ({
    setShowFiledDialog(val: boolean | ((prevState: boolean) => boolean)) {
      setFlawFilterDialogDialog(val);
      if (val) {
        initDefaultVal();
      }
    }
  }));

  //   打开缺陷筛选pmp弹框
  const openFlawFilterPmp = () => {
    if (FlawFilterProps.openPmpFlaw) {
      FlawFilterProps.openPmpFlaw();
    }
  };

  return (
    <Modal
      title={`${FlawFilterProps.type == FlawFilterDialogT.layerId ? '综合Map--缺陷筛选' : '卷--缺陷筛选'}`}
      open={FlawFilterDialogDialog}
      onOk={handleSelect}
      width={550}
      onCancel={() => {
        setFlawFilterDialogDialog(false);
      }}
      wrapClassName="map-flaw-filter-dialog"
    >
      <div className="flaw-filter">
        <div className="line">
          <div style={{ display: 'inlineBlock', marginLeft: 10, width: 60 }}>前制程：</div>
          <Button type={'primary'} onClick={() => openFlawFilterPmp()} className="btn" style={{ marginBottom: 20, width: 360 }}>
            缺陷筛选
          </Button>
        </div>
        <div className="line">
          <div style={{ display: 'inlineBlock', marginLeft: 10, width: 60 }}>POL：</div>
          <TreeSelect {...polTreeProps} dropdownStyle={{ height: 400 }} listHeight={400} treeDefaultExpandAll />
        </div>
        <div className="line">
          <div style={{ display: 'inlineBlock', marginLeft: 10, width: 60 }}>偏贴后：</div>
          <TreeSelect {...pianTreeProps} dropdownStyle={{ height: 400 }} listHeight={400} treeDefaultExpandAll />
        </div>
      </div>
    </Modal>
  );
};
export default observer(FlawFilterDialog);
